<template>
    <div>
        <!-- 预览 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :width="previewWidth" class="preview" v-dialogDrag>
            <components is="filePreview" :list="dataList" v-if="dialogVisible"></components>
            <div slot="footer"></div>
        </el-dialog>
        <div class="main">

            <div class="main_title">{{ list.title }}</div>
            <div class="main_content">
                <el-input v-model="dataFileName" :disabled="true">
                </el-input>
                <el-button type="primary" icon="el-icon-upload" plain @click="monitorUploadData(list.code)">{{ upload
                }}</el-button>
                <el-button icon="el-icon-document" type="primary" plain @click="beforePreview(list.code)" :disabled="flag"
                    v-if="list.default2 !== 'multifile'">预览</el-button>
            </div>
            <input type="file" :id="`file-input-common${list.code}`" style="display: none;"
                @change="fileUpload($event, list.code)" :multiple="list.default2 === 'multifile' ? true : false">
        </div>
    </div>
</template>

<script>
import { uploadTestDataFileRequest, previewTestDataRequest, uploadCloudPictureTestDataFileRequest } from '@/api/tools'
import filePreview from './filePreview.vue'
export default {
    name: 'GenescloudUiDataFile',
    components: { filePreview },
    props: {
        list: {
            type: Object,
            default: () => { }
        },
        pageCode: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            flag: false,
            //预览
            dialogVisible: false,
            dialogTitle: null,
            previewWidth: '800px',
            //预览数据
            dataList: {},
            title: '',
            ws: null,
            sessionId: null,
            uploadId: null,
            //上传的文件
            file: null,
            currentNumber: 0,
            fileSize: null,
            //组件code
            cloudPictureCode: null,
            upload: '上传',
            dataFileName: null,
        };
    },
    async created() {
        this.$resizeDialog(800, this.previewWidth)
        this.$resizeDialog(750, this.cloudWidth)
        this.dataFileName = this.$attrs.option.analysisForm[this.list.code + 'FileName#']
        this.cloudPictureCode = this.pageCode
    },
    beforeDestroy() {
        this.$unResizeDialog()
    },
    methods: {
        //本地上传
        monitorUploadData(id) {
            if (this.all) return this.$message.error('文件正在上传中，请勿频繁点击！')
            document.querySelector(`#file-input-common${id}`).click()
        },
        //文件上传
        async fileUpload(e, type) {
            let res
            if (this.list.type === "multifile") {
                let files = e.target.files;
                let formData = new FormData();
                for (let i = 0; i < files.length; i++) {
                    this.dataFileName += ',' + files[i].name
                    formData.append("file" + i, files[i]);
                }
                this.uploadId = Date.now()
                res = await uploadCloudPictureTestDataFileRequest(
                    this.pageCode,
                    type,
                    formData)
                if (res.code !== 200) return this.$message.error(res.message)
                // this.dataFileName = res.data.dataFileName
                this.$message({
                    showClose: true,
                    message: '文件上传成功！',
                    type: 'success'
                })
            } else {
                this.flag = true
                this.file = e.target.files[0];
                if (!this.file) return
                // const tsv = this.file.name.split('.')[1] !== 'tsv'
                // const txt = this.file.name.split('.')[1] !== 'txt'
                // const csv = this.file.name.split('.')[1] !== 'csv'
                // const xls = this.file.name.split('.')[1] !== 'xls'
                // const xlsx = this.file.name.split('.')[1] !== 'xlsx'
                // if (tsv && txt && csv && xls && xlsx) return this.$message.error ('暂不支持该文件格式！')
                const formData = new FormData();
                formData.append('file', this.file);
                res = await uploadCloudPictureTestDataFileRequest(
                    this.pageCode,
                    type,
                    formData)
                if (res.code !== 200) return this.$message.error(res.message)
                if (this.list.code === 'data') this.$emit('fileUpload', res.data.recordId)
                this.$message({
                    showClose: true,
                    message: '文件上传成功！',
                    type: 'success'
                })
                this.dataFileName = this.file.name
                //允许上传同一个文件

            }
            this.$emit('changeFile', res.data.recordId, this.list.code)
            e.srcElement.value = ""
            this.flag = false
            // }
        },
        async beforePreview(fileCode) {
            previewTestDataRequest({
                cloudPictureCode: this.pageCode,
                fileCode
            }).then(res => {
                if (res.code !== 200) return this.$message.error(res.message)
                //文件名
                this.dialogTitle = this.list.title
                this.dialogVisible = true
                const data = res.data.dataList
                this.dataList.title = Object.keys(data[0])
                this.dataList.content = data
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.main {
    margin-top: 15px;
    transform: translateX(-100px);

    .main_title {
        font-size: 14px;
        color: #606266;
        font-weight: 700;
    }

    .main_content {
        padding: 15px 0;
        display: flex;

        ::v-deep .el-button--primary.is-plain,
        ::v-deep .el-input.is-disabled .el-input__inner {
            transform: scale(0.8);
        }
    }

    .progress {
        text-align: center;
        // display: flex;
        // flex-direction: column;
        // align-items: center;
    }
}

.hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;
    cursor: pointer;
    border-right: 1px solid #ccc;
    padding-right: 13px;

    &:last-child {
        border-right: 0;
        padding-right: 0;
    }

    &:hover {
        color: #2a82e4 !important;
    }
}

.preview {

    // dialog样式
    ::v-deep .el-dialog__header {
        padding: 10px 0 !important;
        background: #fff;
        text-align: center;
        border-bottom: 1px solid #e9e9e9;

        .el-dialog__title {
            color: #777 !important;
            font-weight: 400;
        }
    }

    ::v-deep .el-dialog__body {
        // margin: 0 25px 0;
        margin: 15px;
        padding: 0;
        border: 1px solid #e9e9e9;
        border-radius: 7px;
        // border-top: 1px solid #ccc;
        //   border-bottom: 1px solid #ccc;
        // position: relative;
        // padding: 0 0 65px;
        // height: 450px;
    }

    ::v-deep .el-dialog__footer {
        // margin: 25px;
        // height: 15px;
        // background-color: red;
        margin: 0;
        padding: 0;
        height: 1px;

    }
}

.cloud {
    ::v-deep .el-dialog__header {
        font-weight: 700;
        text-align: center;
    }

    ::v-deep .el-dialog__body {
        padding: 0 20px 35px;
    }

    ::v-deep .el-dialog__footer {
        height: 1px;
    }
}
</style>